<template>
	<view class="ship">
		<view class="ship-cell"><label><text>*</text>物流公司</label><input type="text" placeholder="请填写物流公司名称" v-model="form.expressCompany" /></view>
		<view class="ship-cell"><label><text>*</text>物流单号</label><input type="text" placeholder="请填写物流单号" v-model="form.express_sn" /></view>
		<view class="ship-cell imgs">
			<label><text>*</text>上传物流单号</label>
			<view class="piclist-box">
				<view class="showimg" v-for="(data,index) in imgList" :key="index" v-if="imgList.length">
					<image class="close" src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png" @click="delInfo(index)"></image>
					<image class="pic" :src="data" mode="aspectFit" @click="previewInfoImg(index)"></image>
				</view>
				<view @click="addInfo"><image src="https://master.shengejiaju.cn/web/static/icons/ico_ad_pic02.png"></image></view>
			</view>
		</view>
		<view class="ship-btn"><button type="primary" @click="ship">确认发货</button></view>
	</view>
</template>

<script>
	const md5 = require('../../../static/utils/md5')
	import host from '@/api/config.js'
	export default {
		data() {
			return {
				uploadParameter: {},
				imgList: [],
				form: {
					order_id: '',
					expressCompany: '',
					express_sn: '',
					express_img: '',
					rec_id: ''
				}
			};
		},
		onLoad(options) {
			this.form.order_id = options.order_id
			this.form.rec_id = options.ids
			this.init()
		},
		methods:{
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			init(){
				let data = {}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					data.port = 'wechat'
				}else{
					data.port = 'h5'
				}
				// #endif
				
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						data.port = 'android'
					  break;
					case 'ios':
						data.port = 'ios'
					  break;
				}
				// #endif
				
				data.key = JSON.parse(uni.getStorageSync('userInfo')).token
				
				data.timestamp = Math.round(new Date() * 1000)
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5.hexMD5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				data.sign = obj
				this.uploadParameter = data
			},
			// 上传物流单号图
			addInfo(){
				let _this = this
				uni.chooseImage({
					count: 9,
					sourceType: ['album','camera'],
					success(res) {
						let url = ''
						url = `${host}/api/Upimg/UpImg`
						let formData = {
							port: _this.uploadParameter.port,
							key: _this.uploadParameter.key,
							timestamp: _this.uploadParameter.timestamp,
							sign: _this.uploadParameter.sign,
						}
						res.tempFilePaths.forEach((item,index) => {
							uni.uploadFile({
								url: url,
								filePath: item,
								name: 'file',
								formData: formData,
								success: (uploadFileRes) => {
									_this.imgList.push(JSON.parse(uploadFileRes.data).datas[0])
								}
							});
						})
					}
				})
			},
			// 移除商品详情图
			delInfo(index){
				this.imgList.splice(index,1)
			},
			// 图片预览
			previewInfoImg(index){
				uni.previewImage({
					current: index,
					urls: this.imgList
				})
			},
			// 确认发货
			ship(){
				this.form.express_img = this.imgList.join(',')
				uni.showModal({
					title: '温馨提示',
					content: '请确认发货信息是否无误？',
					success: (yes) => {
						if(yes.confirm){
							this.$api.OrderDeliver(this.form).then(res => {
								uni.showToast({
									icon: 'none',
									title: '发货成功',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack()
								},1500)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.ship{
		.ship-btn{
			padding: 75rpx;
			button{
				height: 90rpx;
				line-height: 90rpx;
				font-size: 35rpx;
				border-radius: 75rpx;
			}
		}
		.ship-cell{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFF;
			padding: 30rpx 20rpx;
			border-bottom: solid 1px #EEE;
			input{
				text-align: right;
			}
			label{
				display: flex;
				align-items: center;
				text{
					color: #FC1414;
				}
			}
			&.imgs{
				display: block;
				label{
					margin-bottom: 30rpx;
				}
			}
		}
		.piclist-box{
			flex: 1;
			margin-bottom: -20rpx;
			view{
				display: inline-block;
				vertical-align: top;
				&.showimg{
					position: relative;
					image.close{
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						z-index: 1;
						border: solid 1px red;
						border-radius: 50%;
						background-color: red;
						right: 10rpx;
						top: 10rpx;
					}
					image.pic{
						background-color: #EEE;
						vertical-align: top;
						border: solid 1px #EEE;
					}
					.piclist-box-tit{
						position: absolute;
						bottom: 30rpx;
						left: 0;
						right: 20rpx;
						color: #FFF;
						background-color: rgba(0,0,0,.5);
						font-size: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding: 5rpx;
					}
				}
			}
			image{
				width: 200rpx;
				height: 200rpx;
				margin: 0 20rpx 20rpx 0;
				vertical-align: top;
				border: solid 1px #FFF;
			}
		}
	}
</style>